import { useState } from 'react'
import { ExclusiveListItem } from './interface'
import { ExclusiveOrVisibleWrap } from '../style'
import { useVirtualRoomStore } from '../../store'
import shallow from 'zustand/shallow'
import { CheckBox, Switch } from '@kedacom/react-next'
import AddMtDialog from '@/components/AddMt/main'
import { init as addMtInit, resetAllStore } from '@/components/AddMt/store.trans'
import { t } from 'i18next'

const ExclusiveInfo = () => {
	const { data, updateData } = useVirtualRoomStore(
		(state) => ({
			data: state.data,
			updateData: state.updateData,
		}),
		shallow
	)
	const [checkList, setCheckList] = useState<ExclusiveListItem[]>(
		data.exclusiveUser.map((v) => {
			return {
				account: v.account,
				accountType: v.accountType,
				name: v.name,
				portrait: v.portrait,
				checked: false,
			}
		})
	)
	const [currentIndex, setCurrentIndex] = useState(0)

	/** 删除按钮删除元素 */
	function handleDelete(): void {
		var l = checkList.filter((v) => !v.checked)
		setCheckList(l)
		setExclusiveUser(l)
	}

	/** 清空所有元素 */
	function handleClear(): void {
		setCheckList([])
		setExclusiveUser([])
	}

	/** 点击CheckBox */
	function zoomChecked(index: number) {
		let l = checkList.filter((v, i) => {
			if (i === index) {
				v.checked = !v.checked
			}
			return v
		})
		setCheckList(l)
	}

	/** 按Ctrl点击或者shift点击 */
	function ctrlOrShift(event: React.MouseEvent) {
		if (event.ctrlKey) return 'ctrl'
		if (event.shiftKey) return 'shift'
		return ''
	}

	/** 点击非CheckBox选中项 */
	function clickItem(e: React.MouseEvent, index: number) {
		let keyCode = ctrlOrShift(e)
		switch (keyCode) {
			case 'ctrl':
				setCheckList(
					checkList.filter((v, i) => {
						if (i === index) {
							v.checked = true
						}
						return v
					})
				)
				break

			case 'shift':
				let max = Math.max(currentIndex, index)
				let min = Math.min(currentIndex, index)
				for (let j = min; j <= max; j++) {
					setCheckList(
						checkList.filter((v, i) => {
							if (i === j) {
								v.checked = true
							}
							return v
						})
					)
				}
				break

			default:
				setCheckList(
					checkList.filter((v, i) => {
						if (i === index) {
							v.checked = true
						} else {
							v.checked = false
						}
						return v
					})
				)
				break
		}
		setCurrentIndex(index)
	}

	/** 点击叉叉删除选中项 */
	function deleteItem(index: number) {
		var l = [...checkList]
		l.splice(index, 1)
		setCheckList(l)
		setExclusiveUser(l)
	}

	function setExclusiveUser(list: ExclusiveListItem[]) {
		let _list = list.map((v) => {
			return {
				account: v.account,
				accountType: v.accountType,
				name: v.name,
				portrait: v.portrait,
			}
		})
		updateData({ exclusiveUser: _list })
	}
	//添加专属人员弹窗
	const addMt = () => {
		addMtInit({
			selectedEntityMts: checkList,
			meetingType: data.meetingType,
			maxRate: 2048,
			isOpen: true, //弹窗打开状态
			showTrees: ['org'], //要显示的树的类型
			isSuperMeeting: false,
			isSupportRtc: true,
			isMcc: false,
			isOnlyMakeUser: true,
			title: t('添加专属人员'),
			curTemplateE164: '',
			smartCascadeMode: 0,
			onSubmit: ({ selectedList }) => {
				let l = selectedList.map((v) => {
					return {
						account: v.account ?? '',
						accountType: v.accountType ?? 0,
						name: v.name ?? '',
						portrait: v.portrait ?? '',
						checked: false,
					}
				})
				setExclusiveUser(l)
				setCheckList(l)
				resetAllStore()
			},
		})
	}

	return (
		<ExclusiveOrVisibleWrap>
			<div className="meeting-visibility">
				<div className="label">{t('专属会议室')}</div>
				<Switch
					width={40}
					height={22}
					checked={data.exclusive}
					onChange={(e, v) => {
						updateData({ exclusive: v })
					}}
				></Switch>
			</div>
			{data.exclusive ? (
				<div className="zoomListBox">
					<div className="zoomBox-label">
						<div>{t('专属人员列表')}</div>
						<div className="buttonBox">
							<div onClick={() => handleDelete()} className="btn-del">
								{t('删除')}
							</div>
							<div onClick={(e) => handleClear()} className="btn-clear">
								{t('清空')}
							</div>
						</div>
					</div>
					<div className="addZoomBox">
						<div className="addZoom">
							<div onClick={addMt} className="addButton"></div>
							<div className="addButtonText">{t('添加专属人员')}</div>
						</div>
						<div className="chooseZoomList">
							{checkList.map((v, i) => {
								return (
									<div key={i} className={`${v.checked ? 'checked' : ''} list-item`}>
										<span className="checkbox-icon" onClick={() => zoomChecked(i)} />
										<div className="infoBox" onClick={(e) => clickItem(e, i)}>
											<div className="icon"></div>
											<div className="name">{v.name}</div>
										</div>
										<div
											className={`${v.checked ? 'checked' : ''} del`}
											onClick={() => deleteItem(i)}
										></div>
									</div>
								)
							})}
						</div>
					</div>
					<div className="footer">{t('可使用ctrl或shift快捷键进行多选')}</div>
				</div>
			) : (
				''
			)}
			<AddMtDialog />
		</ExclusiveOrVisibleWrap>
	)
}

export default ExclusiveInfo
